<template>
    <div>
      <el-table
        :data="tableData"
        border
        height="400px"
        max-height="400px"
        size="small"
        row-class-name="row"
        cell-class-name="column"
        :highlight-current-row="true"
        fit
      >
        <el-table-column
          v-for="(item, index) in tableLabel"
          :key="index"
          :prop="item.prop"
          :min-width="item.width"
          :label="item.label"
          show-overflow-tooltip
          align="center"
        >
          <el-table-column
            v-for="(itemchildren, indexchildren) in item.list"
            :key="indexchildren"
            :prop="itemchildren.prop"
            :min-width="itemchildren.width"
            :label="itemchildren.label"
            show-overflow-tooltip
            align="center"
          >
            <el-table-column
              v-for="(itemchildrenson, indexchildrenson) in itemchildren.list"
              :key="indexchildrenson"
              :prop="itemchildrenson.prop"
              :min-width="itemchildrenson.width"
              :label="itemchildrenson.label"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </template>
   
  <script>

  export default {
    data() {
      return {
        tableLabel: [
      {
        "label": "分站名称",
        "prop": "substationName",
        "list": null
      },
      {
        "label": "通道名称",
        "prop": "channelName",
        "list": null
      },
      {
        "label": "位置",
        "prop": "gasChannelLocation",
        "list": null
      },
      {
        "label": "氧气",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "o2ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "o2ValueMax"
          }
        ]
      },
      {
        "label": "一氧化碳",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "cOValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "cOValueMax"
          }
        ]
      },
      {
        "label": "二氧化碳",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "cO2ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "cO2ValueMax"
          }
        ]
      },
      {
        "label": "甲烷",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "cH4ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "cH4ValueMax"
          }
        ]
      },
      {
        "label": "乙烯",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "c2H4ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "c2H4ValueMax"
          }
        ]
      },
      {
        "label": "乙炔",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "c2H2ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "c2H2ValueMax"
          }
        ]
      },
      {
        "label": "乙烷",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "c2H6ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "c2H6ValueMax"
          }
        ]
      },
      {
        "label": "氮气",
        "prop": null,
        "list": [
          {
            "label": "一级报警值",
            "prop": "n2ValueMin"
          },
          {
            "label": "二级报警值",
            "prop": "n2ValueMax"
          }
        ]
      }
    ],
        tableData: [
          { SubstationName: 1, ChannelName: 5, GasChannelLocation: 15, o2ValueMin: 1, o2ValueMax: 7 ,cOValueMin:7,cOValueMax:7,cO2ValueMin:0,cO2ValueMax:9,cH4ValueMin:9,cH4ValueMax:8,c2H4ValueMin:9,c2H4ValueMax:8,c2H2ValueMin:8,c2H2ValueMax:9},
          { SubstationName: 1, ChannelName: 5, GasChannelLocation: 15, o2ValueMin: 1, o2ValueMax: 7 ,cOValueMin:7,cOValueMax:7,cO2ValueMin:0,cO2ValueMax:9,cH4ValueMin:9,cH4ValueMax:8,c2H4ValueMin:9,c2H4ValueMax:8,c2H2ValueMin:8,c2H2ValueMax:9},
  
          { SubstationName: 1, ChannelName: 5, GasChannelLocation: 15, o2ValueMin: 1, o2ValueMax: 7 ,cOValueMin:7,cOValueMax:7,cO2ValueMin:0,cO2ValueMax:9,cH4ValueMin:9,cH4ValueMax:8,c2H4ValueMin:9,c2H4ValueMax:8,c2H2ValueMin:8,c2H2ValueMax:9},
          { SubstationName: 1, ChannelName: 5, GasChannelLocation: 15, o2ValueMin: 1, o2ValueMax: 7 ,cOValueMin:7,cOValueMax:7,cO2ValueMin:0,cO2ValueMax:9,cH4ValueMin:9,cH4ValueMax:8,c2H4ValueMin:9,c2H4ValueMax:8,c2H2ValueMin:8,c2H2ValueMax:9},
          { SubstationName: 1, ChannelName: 5, GasChannelLocation: 15, o2ValueMin: 1, o2ValueMax: 7 ,cOValueMin:7,cOValueMax:7,cO2ValueMin:0,cO2ValueMax:9,cH4ValueMin:9,cH4ValueMax:8,c2H4ValueMin:9,c2H4ValueMax:8,c2H2ValueMin:8,c2H2ValueMax:9},
  
        ],
          // 查询参数
          queryParams: {
          pageNum: 1,
          pageSize: 10,
          sort: undefined,
          sortType: undefined,
        },
      };
    },
  
    methods: {
     
      btn1() {
        this.tableLabel.push({
          label: "销售量2",
          list: [
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
          ],
        });
      },
      btn2() {
        this.tableLabel.push({
          label: "销售量2",
          list: [
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
            {
              label: "内容1",
              list: [{ label: "内容1", prop: "a4" }],
            },
          ],
        });
      },
      headerStyle({ row, rowIndex }) {
        // console.log(row, column, rowIndex, columnIndex);
        if (rowIndex == 0) {
          for (let i = 0; i < this.tableLabel.length; i++) {
            row[i].rowSpan = 2;
          }
        }
        if (rowIndex == 1) {
          let numyy = 0 // 记录第二排长度
          for (let i = 0; i < this.tableLabel.length; i++) {
            const newArr = this.tableLabel[i].list
            numyy = numyy + newArr.length
            if ( newArr.length > 1) {
              row[numyy-2].rowSpan = 0;
              row[numyy-1].rowSpan = 0;
            }else{
              row[numyy-1].rowSpan = 0;
            }
          }
        }
      },
    },
  };
  </script>
   
  <style>
  </style>